<template>
  <div class="iphoneLogins-page">
    <div class="headerBox">
      <van-nav-bar
        title="手机号登录"
        left-arrow
        @click-left="onClickLeft"
      ></van-nav-bar>
    </div>
    <div class="input_box">
      <div class="samll_box">
        <i class="icon user" style="float:left"></i>
        <van-field readonly :value="username?username:'请选择账号'" @click="showPicker = true" />
        <van-popup v-model="showPicker" position="bottom" get-container="body">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>
        <span class="sele"></span>
      </div>
      <div class="samll_box">
        <i class="icon pass"></i>
        <input
          type="password"
          v-model="pass"
          placeholder="请输入密码"
        />
      </div>
      <div class="forget" @click="goForget">忘记密码？</div>
    </div>
    <div class="footer" v-show="isOriginHei">
      <span v-if="!type">登录</span>
      <span v-else class="sub" @click="handleSubmit">登录</span>
    </div>
  </div>
</template>

<script>
import positionBtn from "../positionBtn.js";
export default {
  mixins: [positionBtn],
  data() {
    return {
      columns: [],
      type: false,
      username: '',
      pass: '',
      timer: 0,
      timerInter: null,
      showPicker: false,
      list: [],
      // data: [
      //   { name: "匹诺曹" },
      //   { name: "继承者" },
      //   { name: "阿尔罕布拉宫的回忆" },
      //   { name: "李杰" },
      //   { name: "李杰1" }
      // ]
    };
  },
  watch: {
    pass(val) {
      if (val) {
        this.type = true;
      } else {
        this.type = false;
      }
    },
  },
  created() {
    this.list = JSON.parse(localStorage.getItem("userList"))
    console.log(this.list)
    // this.username = this.list[0].name
    this.list.map(value => {
      value = value.username;
      this.columns.push(value);
    });
  },
  methods: {
    goForget() {
      setTimeout(()=>{
        this.$router.push({name: 'forget'})
      },200)
    },
    onConfirm(value, index) {
      this.showPicker = false;
      this.username = value;
    },
    onClickLeft() {
      setTimeout(()=>{
        this.$router.go(-1);
      },200)
    },
    async handleSubmit() {
      console.log(this.username)
      if (!this.username){
        this.$toast("请选择登录账号")
        return false
      }
      if (!this.pass){
        this.$toast("请输入登录密码")
        return false
      }
      let ruleForm = {
        username: this.username,
        pass: this.pass
      }
      let res = await this.$http.login({...ruleForm});
      if (res) {
        let userInfor = res.addInfo;
        userInfor.token = res.data;
        console.log(userInfor);
        localStorage.setItem("userInfor", JSON.stringify(userInfor));
        setTimeout(() => {
          this.$router.push({path:'/'})
        });
      }
    },
  },
};
</script>

<style scoped>
.iphoneLogins-page {
  background: #fff;
  height: 100vh;
}
.input_box {
  padding: 1rem 0.5rem;
}
.samll_box {
  height: 1rem;
  line-height: 1rem;
  border-bottom: 0.02rem solid #d6d5d5;
  margin-bottom: 0.4rem;
  position: relative;
}
.samll_box > input {
  height: 100%;
  width: 5rem;
  border: none;
  font-size: 0.35rem;
}
.icon,.clear,.sele {
  display: inline-block;
  width: 0.48rem;
  height: 0.48rem;
  position: relative;
  top: 0.1rem;
  margin-right: 0.2rem;
}
.sele{
  background: url("../../assets/img/login/icon_xiangxia.png") no-repeat;
  background-size: 100% 100%;
}
.user {
  background: url("../../assets/img/login/icon_geren.png") no-repeat;
  background-size: 100% 100%;
}
.pass {
  background: url("../../assets/img/login/icon_mima.png") no-repeat;
  background-size: 100% 100%;
}
.clear {
  background: url("../../assets/img/login/icon_shanch.png") no-repeat;
  background-size: 100% 100%;
}
.iphone {
  background: url("../../assets/img/login/icon_dianhua.png") no-repeat;
  background-size: 100% 100%;
}
.yan {
  background: url("../../assets/img/login/icon_yanzheng.png") no-repeat;
  background-size: 100% 100%;
}
.hy_code {
  display: inline-block;
  position: absolute;
  width: 1.88rem;
  height: 0.61rem;
  text-align: center;
  line-height: 0.61rem;
  color: #00c8e7;
  border-radius: 0.3rem;
  border: 0.02rem solid #00c8e7;
  top: 0.1rem;
  right: 0;
}
.forget {
  float: right;
  font-size: 0.29rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
}
.footer {
  width: 100%;
  position: fixed;
  padding: 0 0.5rem;
  bottom: 2.2rem;
}
.footer > span {
  width: 100%;
  display: inline-block;
  height: 0.94rem;
  background: #00c8e7;
  line-height: 0.94rem;
  text-align: center;
  color: #fff;
  border-radius: 0.47rem;
  font-size: 0.34rem;
  opacity: 0.4;
}
.footer span.sub {
  opacity: 1;
}
</style>
